{extend name="common/base" /}
{block name="body"} 
<style>
    .slect_dropdown_box{
        height: 300px;
        overflow-y: auto;
    }
</style>
<main>
    <div class="subsaription-block">
        <div class="container layui-row layui-col-space32">
            <h1 class="com-plate-title">Subscription</h1>
            <div class="company-item" id="how">
                <div class="company-item-title">how does subscription work</div>
                {$subscription.content|raw}

            </div>
            <div class="hr_img" id="subscribe">
                <!-- <img src="__ROOT__/static/images/line.png"> -->
            </div>
            <div class="company-item  subsar-subtitle">
                <div class="company-item-title">Become a Member</div>
                <div class="com-content">
                    The flat rate covers the cost of any set of lingerie no matter with the original price. On top
                    of these, you will earn reward points and exclusive gifts!!
                </div>

            </div>
            {if count($subscription_list)} 
                {volist name="subscription_list" id="subscription"} 
                    <div class="subsar-buy ">
                        <div class="more-btn-box">
                            <button class="subsar-btn">{$subscription.tag}</button>
                        </div>
                        <div class="title-box">
                            <div class="title">{$subscription.name}</div>
                            <a class="more" lay-on="help-dialog" data-name="{$subscription.name}" data-detail="{$subscription.detail}">read more<img src="__ROOT__/static/images/more-jt.png"></a>
                        </div>
                        <div class="money">
                            <span class="money-num">${$subscription.price}</span>
                            <span>/Monthly</span>
                        </div>
                        <ul>
                            <li>
                                <p>Bra Size Xs</p>
                                <dl class="active_ul">
                                    <dd class="active">XS</dd>
                                    <dd>S</dd>
                                    <dd>M</dd>
                                    <dd>L</dd>
                                    <dd>XL</dd>
                                    <dd>XXL</dd>
                                </dl>
                            </li>
                            <li>
                                <p>Undie Size XS</p>
                                <dl class="active_ul">
                                    <dd>XS</dd>
                                    <dd>S</dd>
                                    <dd>M</dd>
                                    <dd>L</dd>
                                    <dd>XL</dd>
                                    <dd>XXL</dd>
                                </dl>
                            </li>
                        </ul>
                        <DIV class="content">
                            <p>{$subscription.introduction|default=''}</p>
        
                        </DIV>
                        <div class="dingyue_box">
                            <button class="subsar-btn" lay-on="cancell">Cancellation </button>
                        </div>
                    </div>
                {/volist} 
            {/if}
           
          
         
            <div class="hr_img" id="cancel">
                <!-- <img src="__ROOT__/static/images/line.png"> -->
            </div>
            <div class="subsar-msg-block">
                <div class="msg">Now satisfied with our subscription service? We appreciate your feedback: </div>

                <!-- 登录后显示 -->
                <button class="subsar-btn" lay-on="cancell">Cancellation </button>

                <!-- 登录前显示 -->
                <!-- <div>
                    please <button class="login-btn" lay-on="login">log in to </button> proceed the cancellation
                </div> -->


                <div class="sub-msg">Your subscription will stop on __ (this date).<br>Thank you for your
                    feedback<br> And sorry for the unsatisfied experience.<br>continue shopping.</div>
            </div>
        </div>
    </div>
</main>

{/block}

{block name="js"} 
<script>
    		// Usage
		layui.use(["form"], function () {
			var form = layui.form;
			var layer = layui.layer;
		});
		layui.use(function () {
			var $ = layui.$;
			var layer = layui.layer;
			var util = layui.util;
			var form = layui.form;
			util.on('lay-on', {
				'cancell': function () {


					layer.confirm('Now satisfied with our subscription service? We appreciate your feedback:', {
						btn: ['Ok', 'Close'], //按钮
						title: false,
						skin: 'sure_dialog',
						closeBtn: 0,

					}, function () {
						layer.closeAll()
						layer.open({
							type: 1,
							area: ['1000px', 'auto'], // 宽高
							title: false, // 不显示标题栏
							closeBtn: 0,
							shadeClose: true, // 点击遮罩关闭层
							skin: 'login-dialog canell-dialog',
							content: `<h1>unsubscribe</h1>
						<h2>Are you sure you want to cancel your<br> subscription?</h2>
						<form class="layui-form">
							<div class="layui-form-item cancell_check_box">
								<div class="check_box">
									<input type="checkbox" name="AAA" value="0">
									<div lay-checkbox>
										1-month subscription
									</div>
								</div>
								<div  class="check_box">
									<input type="checkbox" name="AAA" value="0">
									<div lay-checkbox>
										2-month subscription
									</div>
								</div>
								<div  class="check_box">
									<input type="checkbox" name="AAA" value="0">
									<div lay-checkbox>
										3-month subscription
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<textarea class="layui-textarea" placeholder="if the reason of cancellation is not due to the above options, we’d like to hear a little bit more from you."></textarea>
								</div>
							</div>
							<div class="layui-form-item center_box">
								<button onclick="layer.closeAll()" class="btn">OK</button>
							</div>
							</form>
						`
						});
						form.render()
					}, function () {

					});


				},
				'help-dialog': function () {
					var detail = $(this).data('detail');
                    var name   = $(this).data('name')
                
                    layer.open({
                        type: 1,
                        area: ['1000px', 'auto'], // 宽高
                        title: false, // 不显示标题栏
                        closeBtn: 1,
                        shadeClose: true, // 点击遮罩关闭层
                        scrollbar: false, // 暂时屏蔽浏览器滚动条
                        skin: 'help-dialog',
                        content: `<h1>${name}</h1>
                                    ${detail} <!-- 使用模板字符串插入变量 -->
                                    <div class="flex-center">
                                    <a href="order.html" class="btn">subscribe</a>
                                    </div>`
                        });
				},

			})
		})
		$(document).on("click", ".active_ul dd", function () {
			if ($(this).closest(".active_ul").hasClass("more")) {
				$(this).toggleClass("active");
				return;
			}

			$(this).closest(".active_ul").find(".active").removeClass("active");
			$(this).addClass("active");
		});
</script>
{/block}
